<template>
  <div class="execution">
    <basic-container>
      <div style="display:flex;justify-content: space-between;margin-top:20px;">
        <el-form style="display: flex;align-items: center">
          <div style="width:200px;margin-right: 10px" v-if="isShowShopList">
            <el-select v-model="shopVal" size="small" @change="shopChange">
              <el-option
                v-for="(item,index) in shopList"
                :key="item.id"
                :label="item.shopName"
                :value="item.id"></el-option>
            </el-select>
          </div>
          <div style="margin-right: 10px">
            <!--            <span>用户名称 </span>-->
            <el-input v-model="orderMember" size="small" style="width:150px;" placeholder="请输入用户名称"></el-input>
          </div>
          <!--          <div style="margin-right: 10px">-->
          <!--            <span>会员号 </span>-->
          <!--            <el-input v-model="orderCardNumber" size="small" style="width:150px;" placeholder="请输入会员号"></el-input>-->
          <!--          </div>-->
          <!--          <div style="margin-right: 10px">-->
          <!--            <span>电话号码 </span>-->
          <!--            <el-input v-model="orderMobile" size="small" style="width:150px;" placeholder="请输入电话号码"></el-input>-->
          <!--          </div>-->

          <el-button v-if="this.activeName == 'first' " size="small" @click="getList()" style="margin-left:10px;">查询</el-button>
          <el-button v-if="this.activeName == 'third' " size="small" @click="getList(1,1,1,1)" style="margin-left:10px;">查询</el-button>
          <el-button v-if="this.activeName == 'fourth'" size="small" @click="getList(1,1,2,1)" style="margin-left:10px;">查询</el-button>
          <el-button v-if="this.activeName == 'fifth'" size="small" @click="getList(1,3,2,1)" style="margin-left:10px;">查询</el-button>
          <el-button v-if="this.activeName == 'seventh'" size="small" @click="getList(2,2,4,1)" style="margin-left:10px;">查询</el-button>
          <el-button v-if="this.activeName == 'eight'" size="small" @click="getList(2,2,4,2)" style="margin-left:10px;">查询</el-button>
          <!--          <el-button size="small" @click="reset" style="margin-left:10px;">置空</el-button>-->
          <el-button :loading="downloadLoading" size="small" type="primary" icon="el-icon-download"
                     @click="handleDownload">导出
          </el-button>
        </el-form>
        <div class="block">
          <el-date-picker
            v-model="time"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            @change="timeChange"
            :default-time="['00:00:00']">
          </el-date-picker>
        </div>
      </div>
      <el-tabs type="border-card" v-model="activeName" @tab-click="change" style="margin-top: 20px">
        <el-tab-pane label="全部订单" name="first">
          <order-list ref="orderList" :dataList="dataList" :dataLoading="loading"
                      @refreshDataList="getList()"></order-list>
          <div style="margin-top: 20px;text-align: right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="limit"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              background>
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="未接单" name="third">
          <order-list ref="orderList" :dataList="dataList" :dataLoading="loading"
                      @refreshDataList="getList(1,1,1,1)"></order-list>
          <div style="margin-top: 20px;text-align: right">
            <el-pagination
              @size-change="handleSizeChanges"
              @current-change="handleCurrentChanges"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="limit"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              background>
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已接单" name="fourth">
          <order-list ref="orderList" :dataList="dataList" :dataLoading="loading"
                      @refreshDataList="getList(1,1,2,1)"></order-list>
          <div style="margin-top: 20px;text-align: right">
            <el-pagination
              @size-change="handleSizeChangea"
              @current-change="handleCurrentChangea"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="limit"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              background>
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待付款" name="fifth">
          <order-list ref="orderList" :dataList="dataList" :dataLoading="loading"
                      @refreshDataList="getList(1,3,2,1)"></order-list>
          <div style="margin-top: 20px;text-align: right">
            <el-pagination
              @size-change="handleSizeChangeb"
              @current-change="handleCurrentChangeb"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="limit"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              background>
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待评价" name="seventh">
          <order-list ref="orderList" :dataList="dataList" :dataLoading="loading"
                      @refreshDataList="getList(2,2,4,1)"></order-list>
          <div style="margin-top: 20px;text-align: right">
            <el-pagination
              @size-change="handleSizeChangec"
              @current-change="handleCurrentChangec"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="limit"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              background>
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已完成" name="eight">
          <order-list ref="orderList" :dataList="dataList" :dataLoading="loading"
                      @refreshDataList="getList(2,2,4,2)"></order-list>
          <div style="margin-top: 20px;text-align: right">
            <el-pagination
              @size-change="handleSizeChanged"
              @current-change="handleCurrentChanged"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="limit"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              background>
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </basic-container>
  </div>
</template>
<script>
  import orderList from '@/components/orderList'
  import {fetchList} from '@/api/order/order'
  import {getAllShops} from '@/api/shop/shops'

  const calendarTypeOptions = [
    {key: 'CN', display_name: 'China'}
  ]

  // arr to obj ,such as { CN : "China", US : "USA" }
  const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.display_name
    return acc
  }, {})

  export default {
    components: {
      orderList
    },
    filters: {
      statusFilter (status) {
        const statusMap = {
          published: 'success',
          draft: 'info',
          deleted: 'danger'
        }
        return statusMap[status]
      },
      typeFilter (type) {
        return calendarTypeKeyValue[type]
      }
    },
    data () {
      return {
        id: this.$store.state.user.shopId,
        shopVal: '全部门店',
        shopId: '',
        orderMember: '',
        orderMobile: '',
        orderCardNumber: '',
        userId: '',
        shopList: [],
        time: [],
        activeName: 'first',
        dataForm: {
          orderId: '',
        },
        dataList: [],
        total: 0,
        currentPage: 1,
        limit: 20,
        downloadLoading: false,
        loading: false,
        key: '',
        isShowShopList: false
      }
    },
    created () {
      // this.getList()
    },
    mounted () {
      if (this.$store.state.user.shopId) {
        this.shopId = this.$store.state.user.shopId
      }
      if (this.$route.query.pageStatus) {
        this.activeName = this.$route.query.pageStatus
        if (this.activeName == 'seventh') {
          this.getList(2, 2, 4, 1)
        } else if (this.activeName == 'third') {
          this.getList(1, 1, 1, 1)
        } else if (this.activeName == 'fifth') {
          this.getList(1, 3, 2, 1)
        }
      } else {
        this.activeName = 'first'
        this.getList()
      }
      if (this.$store.state.user.shopId) {
        this.isShowShopList = false
      } else {
        this.isShowShopList = true
      }

      this.init()
    },
    methods: {
      init () {
        // this.getList()
        this.getShopList()
      },
      // 获取门店列表
      getShopList () {
        const params = new FormData()
        if (this.$store.state.user.shopId) {
          params.append('shopId', this.$store.state.user.shopId)
        }
        getAllShops(params)
          .then((res) => {
            if (res.data.data) {
              this.shopList = res.data.data
              if (!this.$store.state.user.shopId) {
                this.shopList.unshift({shopName: '全部门店', id: ''})
              }
            }

          })
      },
      shopChange (val) {
        this.shopId = val
        for (let i = 0; i < this.shopList.length; i++) {
          if (this.shopList[i].id === val) {
            this.shopVal = this.shopList[i].shopName
          }
          this.getList()
        }
      },
      timeChange (time) {
        this.time = time
        this.getList()
      },
      //获取数据列表
      getList (orderStatus, payStatus, serviceStatus, commentStatus) {
        this.loading = true
        let data = new FormData()
        data.append('shopId', this.shopId)
        data.append('currentPage', this.currentPage)
        data.append('limit', this.limit)
        data.append('orderMember', this.orderMember)
        data.append('orderCardNumber', this.orderCardNumber)
        data.append('orderMobile', this.orderMobile)
        if (this.time != null && this.time.length > 0) {
          data.append('startTime', this.time[0])
          data.append('endTime', this.time[1])
        }
        if (orderStatus) {
          data.append('orderStatus', orderStatus)
        }
        if (payStatus) {
          data.append('payStatus', payStatus)
        }
        if (serviceStatus) {
          data.append('serviceStatus', serviceStatus)
        }
        if (commentStatus) {
          data.append('commentStatus', commentStatus)
        }
        fetchList(data).then(response => {
          if (response.data.code === 0) {
            this.dataList = response.data.data.list
            this.total = response.data.data.totalCount
          } else {
            this.dataList = []
            this.total = 0
          }
          this.loading = false
        })
      },
      reset () {
        this.key = ''
        this.getList()
      },
      // 全部
      handleSizeChange (val) {
        this.limit = val
        this.getList()
      },
      handleCurrentChange (val) {
        this.currentPage = val
        this.getList()
      },
      // 未接单
      handleSizeChanges (val) {
        this.limit = val
        this.getList(1, 1, 1, 1)
      },
      handleCurrentChanges (val) {
        this.currentPage = val
        this.getList(1, 1, 1, 1)
      },
      //已接单
      handleSizeChangea (val) {
        this.limit = val
        this.getList(1, 1, 2, 1)
      },
      handleCurrentChangea (val) {
        this.currentPage = val
        this.getList(1, 1, 2, 1)
      },
      // 待付款
      handleSizeChangeb (val) {
        this.limit = val
        this.getList(1, 3, 2, 1)
      },
      handleCurrentChangeb (val) {
        this.currentPage = val
        this.getList(1, 3, 2, 1)
      },
      // 待评价
      handleSizeChangec (val) {
        this.limit = val
        this.getList(2, 2, 4, 1)
      },
      handleCurrentChangec (val) {
        this.currentPage = val
        this.getList(2, 2, 4, 1)
      },
      // 已完成
      handleSizeChanged (val) {
        this.limit = val
        this.getList(2, 2, 4, 2)
      },
      handleCurrentChanged (val) {
        this.currentPage = val
        this.getList(2, 2, 4, 2)
      },
      change (tab, event) {
        // console.log('标签：：', Number(tab.index))
        switch (Number(tab.index)) {
          case 0:
            this.getList()
            break
          case 1:
            this.getList(1, 1, 1, 1)
            break
          case 2:
            this.getList(1, 1, 2, 1)
            break
          case 3:
            this.getList(1, 3, 2, 1)
            break
          case 4:
            this.getList(2, 2, 4, 1)
            break
          case 5:
            this.getList(2, 2, 4, 2)
            break
        }
      },
      handleDownload () {
        this.downloadLoading = true
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['订单编号', '下单时间', '订单用户', '配送员', '订单金额', '支付金额', '下单店铺', '红旗会员卡号', '订单状态', '服务（配送）状态', '联系电话', '订单地址', '买家备注']
          const filterVal = ['orderId', 'orderCtime', 'orderMember', 'deName', 'orderAmount', 'payAmount', 'shopName', 'orderCardNumber', 'orderStatus', 'serviceStatus', 'orderMobile', 'orderAddress', 'buyerRemake']
          const data = this.formatJson(filterVal, this.dataList)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '订单 ' + new Date().toLocaleDateString()
          })
          this.downloadLoading = false
        })
      },
      formatJson (filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'orderStatus') {
            if (v[j] === 1) {
              return '未完成'
            } else if (v[j] === 2) {
              return '已完成'
            } else if (v[j] === 3) {
              return '已取消'
            } else {
              return ''
            }
          } else if (j === 'serviceStatus') {
            if (v[j] === 1) {
              return '未接单'
            } else if (v[j] === 2) {
              return '已接单'
            } else if (v[j] === 3) {
              return '二次接单'
            } else if (v[j] === 4) {
              return '配送完成'
            } else {
              return ''
            }
          } else {
            return v[j]
          }
        }))
      }
    }
  }
</script>
<style>
  .block {
    width: 400px;
  }
</style>
